<template>
  <div>
    <div v-if="false">
      <h3>父组件</h3>
      <h3>{{ msg }}</h3>
      <hr />
      <child :msg="msg" @updateMsg="showChildMsg" />
      <hr />
      <button @click="msg += '=='">更新</button>
    </div>

    <!-- 计算属性和监视属性 测试 -->
    <watchAndCal v-if="false" />

    <!-- vue3 生命周期测试 -->
    <div v-if="false">
      <lifeCycle v-if="isShow" />
      <hr />
      <button @click="isShow = !isShow">显示</button>
    </div>

    <!-- 自定义函数测试 -->
    <div v-if="false">
      <hookTest />
    </div>

    <!-- toRefs使用测试 -->
    <div v-if="false">
      <toRefsTest />
    </div>

    <!-- ref 使用测试 -->
    <div v-if="false">
      <refTest />
    </div>

    <!-- provide 和 inject 使用测试 -->
    <div v-if="false">
      <h2>祖先组件</h2>
      <h3>color: {{ color }}</h3>
      <button @click="updateColor('green')">green</button> &nbsp;&nbsp;
      <button @click="updateColor('red')">red</button>&nbsp;&nbsp;
      <button @click="updateColor('yellow')">yellow</button>
      <hr />
      <son />
    </div>

    <!-- teleport 使用测试 -->
    <div v-if="false">
      <h2>父组件</h2>
      <buttonModal />
    </div>

    <!-- suspense 使用测试 -->
    <div v-if="true">
      <h2>父级组件</h2>
      <Suspense>
        <template #default>
          <AsyncComponent />
        </template>
        <template v-slot:fallback>
          <div>加载中 ....</div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineAsyncComponent,
  defineComponent,
  onMounted,
  provide,
  ref,
} from "vue";
import child from "./components/child.vue";
import watchAndCal from "./components/watchAndCal.vue";
import lifeCycle from "./components/lifeCycle.vue";
import hookTest from "./components/hookTest.vue";
import toRefsTest from "./components/toRefsTest.vue";
import refTest from "./components/refTest.vue";
import son from "./components/son.vue";
import buttonModal from "./teleport/buttonModal.vue";

// vue3 动态引入组件方式
// const AsyncComponent = defineAsyncComponent(
//   () => import("./suspense/AsyncComponent.vue")
// );
// 静态引入方式
import AsyncComponent from "./suspense/AsyncComponent.vue"

export default defineComponent({
  name: "app",
  components: {
    AsyncComponent,
    child,
    watchAndCal,
    lifeCycle,
    hookTest,
    toRefsTest,
    refTest,
    son,
    buttonModal,
  },
  setup() {
    const msg = ref("Hello");
    const isShow = ref(true);

    function showChildMsg(msg: string) {
      console.log("showChildMsg ... ", msg);
    }

    const color = ref("green");

    // 传递给子组件
    provide("color", color);

    const updateColor = (selected: string) => {
      color.value = selected;
    };

    return {
      isShow,
      msg,
      child,
      showChildMsg,
      color,
      updateColor,
    };
  },
});
</script>
